import Taro, {Component} from '@tarojs/taro'
import {connect} from '@tarojs/redux'
import {View, ScrollView, Picker} from '@tarojs/components'
import './index.less'
import storage from "../../util/storage";
import {AtList, AtListItem} from 'taro-ui'

@connect(({homepage, houseDetail, houseHome, loading, login}) => ({
  homepage,
  houseHome,
  houseDetail,
  login,
  loading
}))

export default class Homepage extends Component {

  config = {
    navigationBarTitleText: ''
  }

  constructor(props) {
    super(props)
    this.state = {}
  }

  componentWillMount() {
  }

  componentDidMount() {
    const {dispatch} = this.props;


    if (!storage.getStorage()||storage.getStorage()===null){
      Taro.navigateTo({
        url: `/pages/login/index`
      })
    }

    dispatch({type: 'homepage/initData'})
    // 获取列表数据
    dispatch({type: 'homepage/loadList'})
    dispatch({type: 'homepage/loadDistrict'})
  }

  choseListData(item) {
    const {dispatch} = this.props;
    dispatch({
      type: 'houseDetail/updateState',
      payload: {
        listData: {
          ...item
        }
      }
    })
    Taro.navigateTo({
      url: `/pages/houseDetail/index`
    })
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  // 下拉滚动
  onScrollToLower(e) {
    const {
      dispatch
    } = this.props;
    dispatch({
      type: 'homepage/loadList'
    })
    dispatch({
      type: 'homepage/updateState'
    })
  }

  changeAreaValue(value) {
    const {
      dispatch
    } = this.props;
    let areaTypeRangeList = [];
    if (value.type == 'land') {
      areaTypeRangeList = [{
        minArea: 0,
        maxArea: 0,
        text: '不限'
      }, {
        minArea: 0,
        maxArea: 5,
        text: '5亩以下'
      }, {
        minArea: 5,
        maxArea: 10,
        text: '5~10亩'
      }, {
        minArea: 10,
        maxArea: 20,
        text: '10~20亩'
      }, {
        minArea: 20,
        maxArea: 50,
        text: '20~50亩'
      }, {
        minArea: 50,
        maxArea: 0,
        text: '50亩以上'
      }]

    } else {
      areaTypeRangeList = [{
        minArea: 0,
        maxArea: 0,
        text: '不限'
      }, {
        minArea: 0,
        maxArea: 500,
        text: '0~500m²'
      }, {
        minArea: 500,
        maxArea: 1000,
        text: '500~1000m²'
      }, {
        minArea: 1000,
        maxArea: 2000,
        text: '1000~2000m²'
      }, {
        minArea: 2000,
        maxArea: 4000,
        text: '2000~4000m²'
      }, {
        minArea: 4000,
        maxArea: 0,
        text: '4000m²以上'
      }]
    }

    const updateState = (obj) => {
      dispatch({
        type: 'homepage/updateState',
        payload: {
          ...obj
        }
      })
    }
    updateState({areaTypeRange: areaTypeRangeList})
  }

  // 业务类型页面跳转
  goPage(item){
    const { dispatch } = this.props;
    if(item.type){
      dispatch({ type: 'houseHome/initData' })
      dispatch({ type: 'houseHome/updateState', payload: { houseType: { type: item.type, text: item.name }} });
    }
    Taro.navigateTo({
      url: `/pages/${item.path}/index`
    })
  }

  // 帮我操作切换
  handelHelp(helpCode){
    const { dispatch } = this.props;
    dispatch({ type: 'homepage/updateState', payload: { helpCode }})
  }

  // 切换房屋类型
  changeType(item){
    const { dispatch } = this.props;
    dispatch({type: 'homepage/initData'})
    dispatch({ type: 'homepage/updateState', payload: { 
      houseType: {
        type: item.type,
        text: item.text
      }
    }})
    dispatch({type: 'homepage/loadList'})
  }

  render() {
    const {
      homepage, dispatch
    } = this.props;
    const {
      listData, houseTypeRange, houseType, moreData, 
      helpCode, tabList, helpList
    } = homepage;

    const bannerList = ['https://factory.wenyangchou.com/myfiles/system/factory1.jpg', 'https://factory.wenyangchou.com/myfiles/system/factory2.jpg', 'https://factory.wenyangchou.com/myfiles/system/factory3.jpg']
    return (
      <View className='homepage'>
        <View className='topBox'>
          {
            bannerList && bannerList[0] ?
              <Swiper
                interval={10000}
                className="swiper-container"
                circular
                indicatorDots
                autoplay
                indicatorColor='#FAFAFA'
                indicatorActiveColor='#026179'
              >
                {
                  bannerList.map((item, index) => (
                    <SwiperItem key={index}>
                      {/* <image src={`${DOWNLOAD + item}`} className="swiper-img" /> */}
                      <image src={item} className="swiper-img"/>
                    </SwiperItem>
                  ))
                }
              </Swiper>
              :
              <Image className="swiper-img bannerDef" mode="widthFix" src="../../images/banner.png"></Image>
          }
        </View>
        <View className='scheduleNear'>
          {/* 业务类型选择 */}
          {
            tabList.map(item => <View className='tabBox' onClick={this.goPage.bind(this, item)} >
              <image src={`../../images/home/${item.photo}.png`} mode="widthFix"/>
              <View>{item.name}</View>
            </View>)
          }
          {/* 帮我 */}
          <View className='helpBox'>
            {
              helpList.map(item => <View 
                className={item.code===helpCode?'helpChildOn':'helpChild'} 
                onClick={this.handelHelp.bind(this, item.code)} 
                key={item.code}
              >
                <View>{item.name}</View>
                <View className='bar'>
                  {item.code===helpCode&&<View></View>}
                </View>
              </View>)
            }
          </View>
          <View className='helpChode'  onClick={this.goPage.bind(this, {path: 'searchMatch'})}>
            <image src={`../../images/home/${helpCode}.png`} mode="widthFix"/>
          </View>
          <View className="choseTypeBox">
            <scroll-view scroll-x="true" style="width:100%; white-space:nowrap">
              {houseTypeRange.map((item) => <View className='choseType' key={item.type}>
                <View className={`${houseType.type === item.type ? 'choseChildOn' : 'choseChild'}`}
                  onClick={this.changeType.bind(this, item)}
                >{item.text}</View>
              </View>)
              }
              <View className='loadMore'>
                <View className='choseChild' onClick={this.goPage.bind(this, moreData)}>{`更多 >`}</View>
              </View>
            </scroll-view>
          </View>
          {/* <View className='pick'>
            <View className='pick_child'>
              <AtList>
                <Picker mode='selector' range={houseTypeRange} rangeKey="text"
                        onChange={(e) => {
                          dispatch({type: 'homepage/initData'})
                          updateState({houseType: houseTypeRange[e.detail.value]})
                          this.changeAreaValue(houseTypeRange[e.detail.value])
                          dispatch({type: 'homepage/loadList'})
                        }}
                >
                  <AtListItem
                    title={houseType.text}
                    arrow='bottom'
                  />
                </Picker>
              </AtList>
            </View>
            <View className='pick_child'>
              <AtList>
                <Picker mode='selector' range={districtTypeRange} rangeKey="name"
                  onChange={(e) => {
                    dispatch({type: 'homepage/initData'})
                    updateState({districtType: districtTypeRange[e.detail.value]})
                    dispatch({type: 'homepage/loadList'})
                  }}
                >
                  <AtListItem
                    title={districtType.name}
                  />

                </Picker>
              </AtList>
            </View>
            <View className='pick_child'>
              <AtList>
                <Picker mode='selector' range={areaTypeRange} rangeKey="text"
                  onChange={(e) => {
                    dispatch({type: 'homepage/initData'})
                    updateState({areaType: areaTypeRange[e.detail.value]})
                    dispatch({type: 'homepage/loadList'})
                  }}
                >
                  <AtListItem
                    title='面积'
                  />
                </Picker>
              </AtList>
            </View>
            {houseType.text == '空地'?<View className='pick_child' >
              <AtList>
                <Picker mode='selector' range={landTypeRange} rangeKey="text"
                  onChange={(e) => {
                    dispatch({type: 'homepage/initData'})
                    updateState({landType: landTypeRange[e.detail.value]})
                    dispatch({type: 'homepage/loadList'})
                  }}
                >
                  <AtListItem
                    title='类型'
                  />
                </Picker>
              </AtList>
            </View>: <View className='pick_child'>
              <AtList>
                <Picker mode='selector' range={floorTypeRange} rangeKey="text"
                  onChange={(e) => {
                    dispatch({type: 'homepage/initData'})
                    updateState({floorType: floorTypeRange[e.detail.value]})
                    dispatch({type: 'homepage/loadList'})
                  }}
                >
                  <AtListItem
                    title='楼层'
                  />
                </Picker>
              </AtList>
            </View>}
          </View> */}
          <View className='firstList'>
            <ScrollView
              scrollY
              onScrollToLower={this.onScrollToLower.bind(this)}
              style="height:100%"
            >
              {
                listData.map((item, i) => <View className='listChild' key={i}
                    onClick={this.choseListData.bind(this, item)}
                >
                  <View className='box_left'>
                    <image src={item.topImage}/>
                    <View className='box_text'>{item.rentType ? '可分租' : '整租'}</View>
                  </View>
                  <View className='box_right'>
                    <View className='product'>{item.name}</View>
                    <View className='address'>{item.address||''} </View>
                    <View className='area'><text>{item.totalArea}</text> m²</View>
                    <View className='price'>{item.totalPrice != -1 ? item.totalPrice + '元/月' : '面议'} </View>
                  </View>
                </View>)
              }
            </ScrollView>
          </View>
        </View>
      </View>
    )
  }
}
